<template>
  <view class="my-order">
    <view class="my-order-item" v-for="(lts,keyId) in sortList" v-bind:key="keyId">
      <view class="order_id_box">
        <text class="order_name">订单号:</text>
        <text class="order_id">
         {{keyId}}
        </text>
        <text
          v-bind:class="{'status_wfk':lts[0].Order_Pay_status == 0,'status_yfk':lts[0].Order_Pay_status != 0 }">{{ lts[0].Order_Pay_status == 0 ? "未付款" : "已付款" }}</text>
        <!-- <uni-icons custom-prefix="custom-icon" type="trash" color="#999" size="20"></uni-icons> -->
      </view>
      <view class="shop-info-item" v-for="(item,index) in lts" v-bind:key="index">
        <image  lazy-load v-bind:src="item.Goods_imgPath" mode=""></image>
        <view class="shop_info_box">
          <view class="shop_name">
            {{ item.Goods_name }}
          </view>
          <view class="shop_price">
            <text>商品单价:</text><text class="grey">{{ `￥${item.Goods_price}` }}</text>
          </view>
          <view class="shop_price">
            <text>发放数量:</text><text class="grey">{{ `${item.Goods_count}` }}</text>
          </view>
          <view class="shop_send_obj">
            <text>发放对象:</text><text class="grey">{{ item.Receiver }}</text>
          </view>
          <view class="shop_send_obj">
            <text>发放状态:</text><text class="grey"> {{ item.Order_Send_status == 0 ? "未发放" : "发放" }}</text>
          </view>
        </view>
     
      </view>
      <view class="shop-time">
        <view class="shop-time-left">
         <text class="rili"></text>
         <text>{{lts[0].creatime_str}}</text>
        </view>
        <view class="pay_num">
          <text>现金支付</text>
          <text style="color:#E33F2A;">￥{{lts[0].Order_Pay_price}}</text>
        </view>
      </view>
      <view class="pay_btn">
       
        <view class="pay_detail" @click="gotoOrderDetail(keyId)">
          付款明细
        </view>
        <view class="pay_for" @click="gotoCustomer(keyId)">
          联系客服
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import md5 from "js-md5"
    import {creatTime} from '../../until/until.js'
  export default {
    data() {
      return {
        Bid: 65,
        userId: 0,
        signMd5: '',
        sortList:'',
        show: false,
        type: 'center'
      };
    },
    mounted() {
      this.md5Fn(this._queryuserorder);
    },
    methods: {
      gotoOrderDetail(val) {
        uni.navigateTo({
          url: `/subpkg/my_order_detail/my_order_detail?orderId=${val}`
        })
      },
      gotoCustomer(val){
        uni.navigateTo({
          url: `/subpkg/customer_service/customer_service?orderId=${val}`
        })
      },
      md5Fn(cb) {
        //debugger
        const userId = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const Md5 = md5(`Bid=65&UserId=${userId}&key=C63A39419CE64F258ADFE3FAF5E63477`);
        this.signMd5 = Md5;
        this.userId = userId;
        cb && cb()
      },
      _queryuserorder() {
        uni.$http.get(
          `/WebApi/Wap/Action?t=queryuserorder&data=${JSON.stringify({Bid:this.Bid,UserId:this.userId,Sign:this.signMd5})}`
        ).then(({
          data: res
        }) => {

          console.log(res);
          if (res.code == 0) {
            this.sortList = res.data.reduce((acc, cur) => {
              // 如果不存在这个键，则设置它赋值 [] 空数组
              if (!acc[cur.Order_id]) {
                acc[cur.Order_id] = [];
              }
              acc[cur.Order_id].push(cur)
              return acc
            }, {})
            for(let key in this.sortList){
              this.sortList[key].map(item=>{
              this.$set(item,'creatime_str',creatTime(item.CreateTime))
              
             })
            }
            
            console.log(this.sortList)
          }

        
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-order {
    width: 710rpx;
    overflow: hidden;
    zoom: 1;
    margin: 0 auto;
  }

  .my-order-item {
    width: 670rpx;
    overflow: hidden;
    zoom: 1;
    padding: 33rpx 20rpx;
    background: #FFFFFF;
    border-radius: 12px;
    margin-top: 20rpx;

    .order_id_box {
      width: 100%;
      overflow: hidden;
      zoom: 1;
      display: flex;
      flex-direction: row;
      justify-content: start;
      margin-bottom: 36rpx;

      text.order_name {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #1A1A1A;
        margin-right: 10rpx;
      }

      text.order_id {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-right: 30rpx;
      }

      text.status_wfk {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #E33F2A;
        margin: 0 4rpx;
      }

      text.status_yfk {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin: 0 4rpx;
      }
    }

    .shop-info-item {
      width: 100%;
      height: 184rpx;
      display: flex;
      flex-direction: row;
      justify-content: start;
      margin-bottom: 20rpx;
      position: relative;

      image {
        width: 184rpx;
        height: 184rpx;
      }

      .shop_info_box {
        height: 184rpx;
        padding-left: 23rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .shop_name {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #1A1A1A;
        }

        .shop_price {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #808080;

          text.grey {
          color: #1A1A1A;
            margin-left: 10rpx;
          }
        }

        .shop_send_obj {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #808080;

          text.grey {
            color: #333;
            margin-left: 10rpx;
          }
        }
      }
    }
    .shop-time{
      width:100%;
      display: flex;
      justify-content:space-between;
      align-items:center;
      margin:26rpx auto;
      .shop-time-left{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #1A1A1A;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .rili{
          width:28rpx;
          height:28rpx;
          background:url('https://img.5211game.com/Base/xiaochengxu/static/rili.png');
          background-size: contain;
          margin-right: 10rpx;
        }
      }
      .pay_num {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #1A1A1A;
      }
    }


    .pay_btn {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      position: relative;

      .pay_detail {
        width: 157rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #FFFFFF;
        border: 2rpx solid #D3D4D6;
        border-radius: 36rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #1A1A1A;
      }

      .pay_for {
        width: 157rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #FFFFFF;
        border: 2rpx solid #FFA000;
        border-radius: 36rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFA000;
        margin-left: 20rpx;
      }
    }
  }

  .popup-content {
    width: 610rpx;
    min-height: 320rpx;
  }
</style>
